<template>
  <div>
    <!-- <el-card class="box-card">
      <span>布局分布：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-card> -->
    <grid-layout :layout.sync="layout"
                 :col-num="12"
                 :row-height="30"
                 :is-draggable="true"
                 :is-resizable="true"
                 :is-mirrored="false"
                 :vertical-compact="true"
                 :margin="[10, 10]"
                 :use-css-transforms="true">

      <grid-item v-for="(item,index) in layout"
                 :key="item.i"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i">
        <div class="grid-close-bar">
          <i class="el-icon-close"
             @click="delete_grid_item(index)" />
        </div>
        {{ item.i }}
      </grid-item>
    </grid-layout>
    <div class="config-footer">
      <div class="delete-item-list">
        <div v-for="(item,index) in layout_deleted"
             :key="index"
             class="delete-item-parent">
          <div class="delete-item">
            <div class="grid-close-bar">
              <i class="el-icon-plus"
                 @click="add_grid_item(index)" />
            </div>
            <div class="camera-no">
              <span v-if="item.name"
                    style="font-size: 40px;">{{ item.name }}</span>
              <span v-else>{{ item.i }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tail" />
  </div>
</template>
<script>
import VueGridLayout from 'vue-grid-layout'
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data() {
    return {
      layout: [
        { 'x': 0, 'y': 0, 'w': 2, 'h': 4, 'i': '0' },
        { 'x': 2, 'y': 0, 'w': 2, 'h': 4, 'i': '1' },
        { 'x': 4, 'y': 0, 'w': 2, 'h': 4, 'i': '2' },
        { 'x': 6, 'y': 0, 'w': 2, 'h': 4, 'i': '3' },
        { 'x': 8, 'y': 0, 'w': 2, 'h': 4, 'i': '4' },
        { 'x': 10, 'y': 0, 'w': 2, 'h': 4, 'i': '5' },
        { 'x': 0, 'y': 4, 'w': 2, 'h': 4, 'i': '6' },
        { 'x': 2, 'y': 4, 'w': 2, 'h': 4, 'i': '7' },
        { 'x': 4, 'y': 4, 'w': 2, 'h': 4, 'i': '8' },
        { 'x': 6, 'y': 4, 'w': 2, 'h': 4, 'i': '9' },
        { 'x': 8, 'y': 4, 'w': 2, 'h': 4, 'i': '10' },
        { 'x': 10, 'y': 4, 'w': 2, 'h': 4, 'i': '11' },
        { 'x': 0, 'y': 8, 'w': 2, 'h': 4, 'i': '12' },
        { 'x': 2, 'y': 8, 'w': 2, 'h': 4, 'i': '13' },
        { 'x': 4, 'y': 8, 'w': 2, 'h': 4, 'i': '14' },
        { 'x': 6, 'y': 8, 'w': 2, 'h': 4, 'i': '15' },
        { 'x': 8, 'y': 8, 'w': 2, 'h': 4, 'i': '16' },
        { 'x': 10, 'y': 8, 'w': 2, 'h': 4, 'i': '17' }
        // { 'x': 0, 'y': 10, 'w': 2, 'h': 4, 'i': '18' },
        // { 'x': 2, 'y': 10, 'w': 2, 'h': 4, 'i': '19' }
      ],
      layout_deleted: [],
      options: [
        { label: '3x6', value: '3' }
      ]
    }
  },
  methods: {
    delete_grid_item(i) {
      this.layout_deleted.push(this.layout[i])
      this.layout.splice(i, 1)
    },
    add_grid_item(i) {
      this.layout.push(this.layout_deleted[i])
      this.layout_deleted.splice(i, 1)
    }
  }
}
</script>
<style lang='scss' scoped>
.vue-grid-item.cssTransforms {
  background: #79797938;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-close-bar {
  position: absolute;
  width: 100%;
  top: 5px;
  text-align: right;
  padding-right: 5px;
  > i {
    cursor: pointer;
  }
}
.delete-item-list {
  padding: 5px;
  width: 100%;
  height: 100%;
  // overflow-x: auto;
  // white-space: nowrap;
}
.delete-item-parent {
  position: relative;
  display: inline-block;
  height: 100%;
  margin-bottom: 5px;
}
.delete-item {
  height: 100%;
  width: 150px;
  background: #79797938;
  // border: 1px solid rgba(10, 67, 188, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
.config-footer {
  height: 120px !important;
  border-top: 1px solid #000;
}
.tail {
  height: 40px;
  background: #f3f5f8;
  margin-top: 7%;
}
</style>
